import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Image } from 'react-native';
import {
    Tabs, Icon, Button,
    Modal,
    WhiteSpace,
    WingBlank,
    Toast, Flex, Tag, DatePicker, List,
    Provider,
} from '@ant-design/react-native';
const styles = StyleSheet.create({

    tabText: {
        fontSize: 10,
        color: "#000",
    },
    tabValText: {
        fontSize: 12,
        color: "#333",
        textAlign: "right"
    },
    titleText: {
        fontSize: 12,
        color: "#B8B8B8"
    }

});
export default class Home_Details extends Component {

    static navigationOptions = props => {

        return {
            headerTitle: `#1燃气站          `,
            headerTintColor: "#fff",
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center',
                fontSize: 16
            },
            headerStyle: {
                backgroundColor: "#3296FA",
            }
        }
    };

    render() {

        const tabs = [
            { title: '订购' },
            { title: '评价' },
            { title: '商家' },
        ];

        return (
            <View style={{ flex: 1, justifyContent: 'center', backgroundColor: "#FFF" }}>

                <View
                    style={{ flexDirection: "row", alignItems: "center", paddingLeft: 25, paddingRight: 25, height: 50, backgroundColor: "#fff", display: "flex", justifyContent: "space-around" }}>
                    <View style={{ flexDirection: "row", alignItems: "center", flex: 1, justifyContent: "center" }}>
                        <Icon name='star' size="xs" /><Text>4.9</Text>
                    </View>
                    <View style={{ flexDirection: "row", alignItems: "center", flex: 1, justifyContent: "center" }}>
                        <Text>月售</Text><Text>4.9</Text>
                    </View>
                    <View style={{ flexDirection: "row", alignItems: "center", flex: 1, justifyContent: "center" }}>
                        <Text>4.9km</Text>
                    </View>
                </View>
                <Tabs tabs={tabs} >
                    <View style={{ flex: 1 }}>
                        <ScrollView style={{ flex: 1, paddingLeft: 15, paddingRight: 15 }}>
                            <TouchableOpacity style={{ alignItems: 'center', flexDirection: "row", height: 100, backgroundColor: "#fff", borderRadius: 5, elevation: 3, marginBottom: 10, display: "flex" }}
                                onPress={this.ondetails}
                            >
                                <Image
                                    style={{ width: 60, height: 60, marginLeft: 15 }}
                                    source={require('../../../static/img/rqz.jpg')}
                                />
                                <View style={{ flex: 1, padding: 10 }}>
                                    <View style={{ flex: 1, flexDirection: "row", alignItems: "center", paddingLeft: 15 }}>
                                        <View style={{ flex: 4 }}>
                                            <Text style={{ fontSize: 16, color: "#000" }}>11.6kg燃气</Text>
                                        </View>

                                    </View>

                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>

                                        <View style={{ flex: 1 }}>
                                            <Text >月售 : 50</Text>
                                        </View>

                                    </View>

                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>

                                        <View style={{ flex: 1 }}>
                                            <Text >¥3.5</Text>
                                        </View>
                                    </View>
                                </View>

                                <Image
                                    style={{ width: 40, height: 40, marginRight: 15 }}
                                    source={require('../../../static/img/zj.png')}
                                />

                            </TouchableOpacity>

                            <TouchableOpacity style={{ alignItems: 'center', flexDirection: "row", height: 100, backgroundColor: "#fff", borderRadius: 5, elevation: 3, marginBottom: 10, display: "flex" }}
                                onPress={this.ondetails}
                            >
                                <Image
                                    style={{ width: 60, height: 60, marginLeft: 15 }}
                                    source={require('../../../static/img/rqz.jpg')}
                                />
                                <View style={{ flex: 1, padding: 10 }}>
                                    <View style={{ flex: 1, flexDirection: "row", alignItems: "center", paddingLeft: 15 }}>
                                        <View style={{ flex: 4 }}>
                                            <Text style={{ fontSize: 16, color: "#000" }}>11.6kg燃气</Text>
                                        </View>

                                    </View>

                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>

                                        <View style={{ flex: 1 }}>
                                            <Text >月售 : 50</Text>
                                        </View>

                                    </View>

                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>

                                        <View style={{ flex: 1 }}>
                                            <Text >¥3.5</Text>
                                        </View>
                                    </View>
                                </View>

                                <Image
                                    style={{ width: 40, height: 40, marginRight: 15 }}
                                    source={require('../../../static/img/zj.png')}
                                />

                            </TouchableOpacity>

                            <TouchableOpacity style={{ alignItems: 'center', flexDirection: "row", height: 100, backgroundColor: "#fff", borderRadius: 5, elevation: 3, marginBottom: 10, display: "flex" }}
                                onPress={this.ondetails}
                            >
                                <Image
                                    style={{ width: 60, height: 60, marginLeft: 15 }}
                                    source={require('../../../static/img/rqz.jpg')}
                                />
                                <View style={{ flex: 1, padding: 10 }}>
                                    <View style={{ flex: 1, flexDirection: "row", alignItems: "center", paddingLeft: 15 }}>
                                        <View style={{ flex: 4 }}>
                                            <Text style={{ fontSize: 16, color: "#000" }}>11.6kg燃气</Text>
                                        </View>

                                    </View>

                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>

                                        <View style={{ flex: 1 }}>
                                            <Text >月售 : 50</Text>
                                        </View>

                                    </View>

                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>

                                        <View style={{ flex: 1 }}>
                                            <Text >¥3.5</Text>
                                        </View>
                                    </View>
                                </View>

                                <Image
                                    style={{ width: 40, height: 40, marginRight: 15 }}
                                    source={require('../../../static/img/zj.png')}
                                />

                            </TouchableOpacity>
                        </ScrollView>
                        <View style={{ display: "flex", height: 50, flexDirection: "row", alignItems: "center", paddingLeft: 15, paddingRight: 15 }}>
                            <View style={{ flex: 1, flexDirection: "row", alignItems: "center", }}>
                                <Text>¥ 123</Text>
                                <View style={{ flex: 1, marginLeft: 15 }}>
                                    <Text>共 123 见</Text>
                                </View>
                            </View>
                            <View style={{ flex: 1 }}>
                                <Button type="primary" size="small">去下单</Button>
                            </View>
                        </View>
                    </View>

                    <View style={{ flex: 1 }}>
                        <View
                            style={{ flexDirection: "row", alignItems: "center", height: 50, backgroundColor: "#fff", borderBottomEndRadius: 3, borderBottomLeftRadius: 3,  marginBottom: 10, display: "flex", justifyContent: "space-around" }}>
                            <Tag>全部</Tag>
                            <Tag>最新</Tag>
                            <Tag>好评</Tag>
                            <Tag>差评</Tag>
                        </View>
                        <View style={{ flex: 1, backgroundColor: "#fff" }}>
                            <ScrollView style={{ flex: 1, paddingLeft: 15, paddingRight: 15 }}>
                                <TouchableOpacity style={{ flexDirection: "row", height: 100, backgroundColor: "#fff", borderBottomWidth:1,borderBottomColor:"#ccc", marginBottom: 10, display: "flex" }}
                                    onPress={this.ondetails}
                                >
                                <View style={{ borderRadius: 50, overflow: "hidden", width: 30, height: 30 }}>
                                    <Image
                                        style={{ width: 30, height: 30 }}
                                        source={require('../../../static/img/rqz.jpg')}
                                    />
                                    </View>
                                    <View style={{ flex: 1}}>
                                        <View style={{ flex: 1 }}>
                                            <View style={{ flex: 1, flexDirection: "row", alignItems: "center", paddingLeft: 15 }}>
                                                <View style={{ flex: 4 }}>
                                                    <Text style={{ fontSize: 16, color: "#000" }}>匿名用户</Text>
                                                </View>

                                            </View>

                                            <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>
                                                <View style={{ flex: 1, flexDirection: "row", display: "flex" }}>
                                                    <Icon name='star' size="xs" /><Text>评分</Text>
                                                </View>
                                                <View style={{ flex: 3 }}>
                                                    <Text >月售</Text>
                                                </View>
                                            </View>

                                            <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>
                                                <View style={{ flex: 1, flexDirection: "row", display: "flex" }}>
                                                    <Text>武汉市武昌区XX路</Text>
                                                </View>
                                              
                                            </View>


                                        </View>
                                       
                                          

                                    </View>

                                </TouchableOpacity>
                            </ScrollView>
                        </View>
                    </View>
                    <ScrollView style={{ flex: 1 }}>
                        <Text>Content of First Tab</Text>
                    </ScrollView>
                </Tabs>



            </View >
        )
    }
}